<template>
    <div>
      <div>
        <el-select v-model="select" multiple placeholder="请选择">
          <el-option
              v-for="(item,index) in weeks"
              :key="index"
              :label="item"
              :value="index">
          </el-option>
        </el-select>
        <div>
          <div class="display-item" v-for="(item,index) in select" :key="index">
            <div class="item-title">
              <el-tag class="left">周{{item+1}}</el-tag>
              <el-checkbox-group v-model="checkboxGroup[item]">
                <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}节</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div class="input-wrap">
              <el-input v-model="classfromGroup[item][index]" v-for="(item2,index) in checkboxGroup[item]" :key="index"  :placeholder="'第'+item2+'节教室'"></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "TakeCard",
  props:{
    checkboxs:{
      type:Array,
      default:function (){
        return [[],[],[],[],[],[],[]]
      }
    },
    classfroms:{
      type:Array,
      default:function (){
        return [[],[],[],[],[],[],[]]
      }
    },
    selects:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  watch:{
    checkboxs:{
      deep: true,  // 深度监听
      handler(newVal){
        this.checkboxGroup=newVal
      }
    },
    classfroms:{
      deep: true,  // 深度监听
      handler(newVal){
        this.classfromGroup=newVal
      }
    },
    selects:{
      deep: true,  // 深度监听
      handler(newVal){
        this.select=newVal
      }
    }
  },
  data(){
    return {
      checkboxGroup:this.checkboxs,
      classfromGroup:this.classfroms,
      select:this.selects,
      cities:[1,2,3,4,5,6,7,8],
      weeks:['周一','周二','周三','周四','周五','周六','周天'],
    }
  }
}
</script>

<style scoped>
.display-item{
  margin-bottom: 5px;
}
.item-title{
  display: flex;
  align-items: center;
}
.display-item .left{
  margin-right: 10px;
}
.input-wrap{
  display: flex;
  justify-content: space-between;
}
.input-wrap .el-input{
  margin: 5px;
}
</style>